<template>
  <LxyBox title="直采商城">
    <div class="zhi-cai-mall">
      <div class="data">
        <div class="item">
          <count-to
            class="val"
            :startVal="0"
            :endVal="amount"
            :duration="1000"
            :decimals="2"
          ></count-to>
          <p class="key">累计交易额(万元)</p>
        </div>
        <div class="item">
          <count-to
            class="val"
            :startVal="0"
            :endVal="order"
            :duration="1000"
          ></count-to>
          <p class="key">总订单数(笔)</p>
        </div>
        <div class="item">
          <count-to
            class="val"
            :startVal="0"
            :endVal="goods"
            :duration="1000"
          ></count-to>
          <p class="key">商品总数(个)</p>
        </div>
      </div>
      <div class="chart">
        <Echart id="zhicai-chart" :options="option" />
      </div>
    </div>
  </LxyBox>
</template>
  
<script setup>
import LxyBox from "../lxyBox";
import { ajax } from "@/store/service";
import { ref, onMounted } from "vue";
import CountTo from "@/components/vueCountTo/vue-countTo.vue";
import { dataGroup } from "@/utils";
import Echart from "@/components/echart/index.vue";
import opt from "./option";

const option = ref({ ...opt });
const amount = ref(0);
const order = ref(0);
const goods = ref(0);


const init = async () => {
  const [res] = await ajax.zhicai();
  amount.value = res.amount;
  order.value = res.order;
  goods.value = res.goods;
  const chart = dataGroup(res.chart);
  option.value.xAxis[0].data = chart.x;
  option.value.series[0].data = chart.y;
};

onMounted(() => {
  init();
});

</script>

<style scoped lang='scss'>
.zhi-cai-mall {
  padding: 0 vw(25);
  padding-top: vh(3);
  height: vh(243);
  box-sizing: border-box;
  .data {
    display: flex;
    justify-content: space-between;
    margin-bottom: vh(20);
    .val {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: vh(24);
      color: #ffffff;
      line-height: vh(24);
      text-align: left;
      font-style: normal;
      margin-bottom: vh(8);
      display: block;
    }
    .key {
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: 400;
      font-size: vh(14);
      color: #ffffff;
      line-height: vh(21);
      text-align: left;
      font-style: normal;
      opacity: 0.8;
    }
  }
  .chart {
    width: vw(469);
    height: vh(150);
  }
}
</style>